<template>
  <div class="welcome-container">
    <a-row :gutter="[0, 10]">
      <a-col
        :md="{ span: 24 }"
        :lg="{ span: 12 }"
      >
        <LoanAmountCard @loan="loan" />
      </a-col>
      <a-col
        :md="{ span: 24, offset: 0 }"
        :lg="{ span: 11, offset: 1 }"
      >
        <RepaymentCard @repay="repay" />
      </a-col>
    </a-row>

    <!-- <TableContainer title="Repayment">
      <RepaymentTable @repay="repay" />
    </TableContainer> -->

    <TableContainer title="History">
      <LoanTable />
    </TableContainer>
  </div>
</template>

<script>
import LoanAmountCard from './loan/AmountCard.vue';
import RepaymentCard from './repayment/Card.vue';
import TableContainer from '@/components/TableContainer';
import RepaymentTable from './repayment/Table.vue';
import LoanTable from './loan/Table.vue';

export default {
  components: {
    LoanAmountCard,
    RepaymentCard,
    TableContainer,
    RepaymentTable,
    LoanTable
  },

  methods: {
    // loan
    loan(task_id) {
      this.$router.push({
        name: 'LoanApplication',
        params: {
          tid: task_id
        }
      });
    },

    // repay
    repay(tid) {
      this.$router.push({
        name: 'RepaymentApplication',
        params: {
          tid
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>

</style>
